boardsize=13;

function initializeHangout() {
	gapi.hangout.data.onStateChanged.add(function(eventobj) {
		if (boardsize != parseInt(eventobj.state["boardsize"])) {
			boardsize=parseInt(eventobj.state["boardsize"]);
			genbody();
			foreach_id(function(id) {
				gid(id).onclick = function(){flip(id);}});
		}
		// A cell was changed, update our board.
		for (var i=0;i<boardsize;i++) {
			for (var j=0;j<boardsize;j++) {
				var cell = toid(i,j);
				setstate(cell, parseInt(eventobj.state[cell]));
				updatecolor(cell);
			}
		}
	});
}

function sendCell(id, value) {
	gapi.hangout.data.setValue(id, value.toString()); }

function initSharedState(reset) {
	var state = gapi.hangout.data.getState();
	if (state[toid(0,0)] == undefined || reset) {
		var inserts = {};
		for (var i=0; i<boardsize; i++) {
			for (var j=0; j<boardsize; j++) {
				inserts[toid(i,j)] = "0";
				if ((i*boardsize+j)%80==79) {
					gapi.hangout.data.submitDelta(inserts,[]);
					inserts={};
				}
			}
		}
		inserts["boardsize"]=boardsize.toString();
		gapi.hangout.data.submitDelta(inserts,[]);
	} else {
		boardsize=parseInt(state["boardsize"]);
		genbody();
		for (var i=0; i<boardsize; i++) {
			for (var j=0; j<boardsize; j++) {
				var cell = toid(i,j);;
				setstate(cell, state[cell])
				updatecolor(cell);
			}
		}
	}
}

function getPlayer() {
	var radios = document.getElementsByName("playerRadios");
	for (var i=0; i < radios.length; i++) {
		if (radios[i].checked) {
			return parseInt(radios[i].value);
		}
	}
	return 0;
}

function gid(id) { return document.getElementById(id); }
function getstate (id) { return gid(id).bstate; }
function setstate (id,state) { gid(id).bstate = state; }
function toid(i,j) { return "s" + i + "." + j; }

colors = ["Khaki", "Black", "White", "Blue", "Red", "Green", "Olive", "Pink", "Sienna", "DarkMagenta", "Lime"];
function foreach_id(f) {
	for (i=0; i<boardsize; i++) for (j=0; j<boardsize; j++) f(toid(i,j)); }

function flip(id) {
	var player = getPlayer();
	if (player == 0) return;
	if (getstate(id)!=0) player=0;
	setstate(id, player);
	updatecolor(id);
	sendCell(id,player);}

function genbody() {
	var txt = "";
	txt += "<div style=\"float:right;\">";
	txt += "Player:";
	txt += "<br/><input type=\"radio\" name=\"playerRadios\" value=\"0\" checked></input><b>Observer</b>";
	for (var i=1;i<colors.length;i++) {
		txt += "<br/><input type=\"radio\" name=\"playerRadios\" value=\"" + i + "\"></input>" + colors[i];
	}
	txt += "</div>";
	txt += "<table id=\"gotable\" cellpadding=\"0\" cellspacing=\"0\">";
	document.body.style.backgroundColor = colors[0];
	for (i=0; i<boardsize; i++) {
		txt += "<tr>";
		for (j=0; j<boardsize; j++) {
			txt += "<td><button id=\"" + toid(i,j) + "\">#</button></td>"; }
		txt += "</tr>"; }
	txt += "</table>";
	txt += "<br/>Version 37";
	document.getElementById("goappdiv").innerHTML=txt; }

function setup(reset) {
	boardsize=parseInt(document.getElementById("boardsize").value);
	initializeHangout();
	genbody();
	foreach_id(function(id) {
		setstate(id,0); updatecolor(id); });
	initSharedState(reset);
	foreach_id(function(id) {
		gid(id).onclick = function(){flip(id);}}); }

function updatecolor(id) { setcolor(gid(id), colors[getstate(id)]); }
function setcolor(e,c) {
	e.setAttribute("style","background-color:" + c + ";" + "color:" + c); }

function main (e) {
	if (e.isApiReady) {
		document.getElementById("boardsize").disabled = false;
		setup(false);
		gapi.hangout.onApiReady.remove(main); }
	else {
		alert("Oh noes! The API isn't actually ready."); }}
